/* pages/card-list/card-list.less */
@import '../../app.less';
.card-rules {
    font-size: 24rpx;
    color: #FF7E00;
    background: #FFF1DB;
    padding: 14rpx 0 12rpx 20rpx;
    margin-bottom: 20rpx;
    .icon-size {
        margin-right: 4rpx;
        vertical-align: middle;
        font-size: 28rpx;
    }
}
.card {
    box-shadow:0rpx 4rpx 8rpx 0rpx #DEDEDE;
    border-radius:16px;
    font-size: 24rpx;
    overflow: hidden;
    margin: 0 14rpx 30rpx;
    overflow: hidden;
    position: relative;
    .out-pic {
        position: absolute;
        font-size: 192rpx;
        color: #808080;
        transform:rotate(-30deg);
        top: -50rpx;
    }
    .card-top {
        padding: 20rpx;
        color: @white;
        &.blue {
            background:linear-gradient(126deg,rgba(106,162,255,1) 0%,rgba(72,155,255,1) 100%);
        }
        &.green {
            background:linear-gradient(126deg,rgba(62,212,104,1) 0%,rgba(32,192,71,1) 100%);
        }
        &.yellow {
            background:linear-gradient(126deg,rgba(255,186,90,1) 0%,rgba(255,184,31,1) 100%);
        }
        &.gray {
            background: #DEDEDE;
        }
        .card-title {
            font-size: 36rpx;
            text {
                font-size: 24rpx;
            }
        }
        .icon-size {
            margin-right: 16rpx;
        }
        .card-content {
            margin: 10rpx 0 20rpx;
        }
        .card-left {
            text {
                font-size: 72rpx;
            }
        }
        .to-use {
            width: 160rpx;
            height: 60rpx;
            text-align: center;
            line-height: 60rpx;
            border: 2rpx solid @white;
            font-size: 28rpx;
            border-radius: 8rpx;
        }
        .active {
            background:linear-gradient(136deg,rgba(102,102,102,1) 0%,rgba(43,43,43,1) 100%);
            box-shadow:0rpx 4rpx 6rpx 0rpx rgba(89,89,89,1);
            color: #FFCD81;
            border: none;
        }
    }
    .card-bottom {
        padding: 22rpx;
        &.blue {
            color: #4F7CB7;
        }
        &.green {
            color: #1D963C;
        }
        &.yellow {
            color: #FF8500;
        }
        &.gray {
            color: #757575;
        }
        .icon-size {
            font-size: 35rpx;
            margin-right: 12rpx;
        }
    }
}